<template>
  <div class="yy-equipment-warning-manage">
    <!--列表-->
    <div class="yy-store-list-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          设备预警管理
        </p>
        <Form ref="formInline" :model="searchForm"  inline>
          <FormItem prop="user">
            <Input type="text" v-model="searchForm.dName" placeholder="设备名称"></Input>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="searchForm.spec" placeholder="规格型号"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.status" @on-change="changeStorage(searchForm.status)" placeholder="请选择设备状态">
              <Option value="0" >全部</Option>
							<Option value="1" >正常</Option>
              <Option value="2" >维修</Option>
              <Option value="3" >报废</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.isQueryMaintain" placeholder="请选择院区">
              <Option value="0" >全部</Option>
							<Option value="1" >院本部</Option>	
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.ddName" placeholder="请选择部门">
              <Option value="0" >请选择</Option>
              <Option v-for="(dataLt,index) in dataLoctions" :value="dataLt.ddName" :key="index">{{dataLt.localName}}</Option>  
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.dsName" placeholder="请选择设备系统">
              <Option value="0" >全部</Option>
              <Option value="1" >公共设备</Option>
              <Option value="2" >医疗设备</Option>
              <Option value="3" >设备环境</Option>  
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.dcName" placeholder="请选择设备类别">
              <Option value="0" >全部</Option>
              <Option value="1" >环境</Option>  
            </Select>
          </FormItem>
           <FormItem prop="user">
            <Input type="text" v-model="searchForm.queryMaintainMonth" placeholder="距保修期（月）"></Input>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="searchForm.queryLifeMonth" placeholder="距使用期（月）"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" v-model="searchForm.hasNum" placeholder="请选择使用状态">
              <Option value="0">全部</Option>
              <Option value="1">临近保修期</Option>
              <Option value="2">临近使用期</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>
          </FormItem>
        </Form>
        <Table :columns="columns" :data="data" ></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <!--详情-->
    <div class="yy-store-list-details" v-show="type=='details'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          查看详情
        </p>
        <p slot="extra">
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details">
          <p class="details-title"><span>设备名称:</span>{{currentData.dName}}</p>
          <p class="details-title"><span>设备编号:</span>{{currentData.dNum}}</p>
          <p class="details-title"><span>规格型号:</span>{{currentData.spec}}</p>
          <p class="details-title"><span>所属部门:</span>{{currentData.ddName}}</p>
          <p class="details-title"><span>安装位置:</span>{{currentData.installAddress}}</p>
					<p class="details-title"><span>设备系统:</span>{{currentData.dsName}}</p>
					<p class="details-title"><span>设备类别:</span>{{currentData.dcName}}</p>
					<p class="details-title"><span>安装时间:</span>{{currentData.installDate}}</p>
					<p class="details-title"><span>保修年限:</span>{{currentData.maintain}}</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import wareHouseMixin from "../common/warehouse-mixin";

export default {
  name: "yy-equipment-warning-manage",
  mixins: [wareHouseMixin],
  data() {
    return {
      i18n: i18n,
      currentData: "",
      detailsModal: false,
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      searchForm: {
        dName: "",
        spec: "",
        status: 0,
        daNum: "",
        ddNum: "",
        dsNum: "",
        dcNum: "",
        isQueryMaintain: 1,
        queryMaintainMonth: null,
        isQueryLife: 0,
        isQueryLifeMonth: 0,
        userID: "chenweihan"
      },

      columns: [
        {
          title: "设备名称",
          key: "dName"
        },
        {
          title: "设备编码",
          key: "dNum"
        },
        {
          title: "规格型号 ",
          key: "spec"
        },
        {
          title: "所属部门 ",
          key: "ddName"
        },
        {
          title: "安装位置 ",
          key: "installAddress"
        },
        {
          title: "设备系统 ",
          key: "dsName"
        },
        {
          title: "设备类别 ",
          key: "dcName"
        },
        {
          title: "安装时间 ",
          key: "installDate"
        },
        {
          title: "保修年限 ",
          key: "maintain"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.details(params.index);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      data: []
    };
  },

  mounted() {
    this.handleSearch();
  },

  computed: {},

  methods: {
    handleSearch() {
      let obj = this.searchForm;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.searchForm = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data != null) {
              this.page.total = data.total;
              this.page.pageSize = data.pageSize;
              this.data = data.list;
            } else {
              this.$Message.success({ content: "暂无数据！" });
              this.data = [];
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changePage(pageNum) {
      let obj = this.searchForm,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.searchForm = obj;
      this.getList(obj);
    },

    goBack() {
      this.type = "list";
    },

    details(index) {
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
    }
  }
};
</script>
<style lang="less" >
@import "./yy-equipment-warning-manage.less";
</style>
